<template>
	<view class="uni-flex main" style="align-items: center;flex-direction: column;">
		<image style="flex: 1;" class="uni-flex-item" src="../../static/img/headlogo.jpg" mode="aspectFit"></image>
		<form @submit="login" class="uni-flex-item uni-flex" style="flex: 3;align-items: center;flex-direction: column;padding-top: 120rpx;">
			<view class="uni-form-item">
				<input class="uni-input" name="name" placeholder="用户名"></input>	
			</view>
			<view class="uni-form-item with-fun uni-flex" style="justify-content: center;">
				<input class="uni-input" name="password" placeholder="请输入密码" :password="showPassword" />
				<view class="uni-icon uni-icon-eye" style="padding-top: 3%;" :class="[!showPassword ? 'uni-active' : '']" @click="changePassword"></view>
			</view>
			<view class="uni-form-item">
				<button type="primary" style="width: 100%;" form-type="submit">登录</button>
			</view>
			<view class="uni-form-item">
				<button type="default" plain="true" style="width: 100%;" @click="register">注册</button>
			</view>
			<view class="uni-form-item uni-flex">
				<view class="uni-flex-item"style="text-align: right;" @click="console.log('忘记密码')">忘记密码</view>
			</view>
		</form>
		<view class="otherLoginTitle" style="">————————其他登录方式————————</view>
		<view class="uni-flex-item" style="height: 13px;" @click="qqlogin">
			<image src="../../static/QQ.png" mode="aspectFit" style="max-height: 40px;"></image>
		</view>
	</view>
</template>

<script>
var graceChecker = require('../../common/graceChecker.js'),
	_self;
export default {
	
	data() {
		return {
			showPassword: true
		}
	},
	created() {
		_self = this;
	},
	methods: {
		changePassword: function() {
			this.showPassword = !this.showPassword;
		},
		login: function(e) {
			var rule = [
				{ name: 'name', checkType: 'notnull', checkRule: '', errorMsg: '请填写用户名' },
				{ name: 'password', checkType: 'notnull', checkRule: '', errorMsg: '请填写密码' },
			];
			var formdata = e.detail.value
			var checkRes = graceChecker.check(formdata, rule);
			if (checkRes) {
				uni.showLoading({
					title: '登录中...'
				});
				uni.request({
					url: _self.websiteUrl + '/user/login',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {"name": formdata.name, "password": formdata.password},
					success: (t) => {
						if (t.data.status === 200) {
							uni.hideLoading();
							uni.setStorageSync("token", t.data.payload);
							uni.showToast({
								icon: 'success',
								title: '登录成功！',
								duration: 1000
							})
							setTimeout(function() {
								uni.reLaunch({
									url: '../index/index'
								})
							}, 1000)
						} else {
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								title: '请求失败!'
							})
						}
					},
					fail: (t) => {
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: '请求失败!'
						})
					}
				})
			} else {
				uni.showToast({ title: graceChecker.error, icon: 'none', image: '../../static/error.png' });
			}
		},
		qqlogin: function() {
			uni.showLoading({
				title: '登录中...'
			})
			uni.login({
				provider: 'qq',
				success: function (loginRes) {
					uni.getUserInfo({
						provider: 'qq',
						success: (res) => {
							try {
								uni.setStorageSync('qq', res.userInfo);
								uni.request({
									url: _self.websiteUrl + '/qq/check',
									method: 'POST',
									header: {
										'content-type': 'application/x-www-form-urlencoded'
									},
									data: {"openId": res.userInfo.openId},
									success: (t) => {
										uni.hideLoading();
										if (t.data.status === 200 && t.data.payload === false) {
											uni.navigateTo({
												url: '../qq/qqChoice/qqChoice'
											})
										} else if (t.data.status === 200 && t.data.payload === true) {
											uni.request({
												url: _self.websiteUrl + '/qq/login',
												method: 'POST',
												header: {
													'content-type': 'application/x-www-form-urlencoded'
												},
												data: {"openId": res.userInfo.openId},
												success: (t) => {
													if (t.data.status === 200 && t.data.success == true) {
														uni.hideLoading();
														uni.setStorageSync("token", t.data.payload);
														uni.showToast({
															icon: 'success',
															title: '登录成功！',
															duration: 1000
														})
														setTimeout(function() {
															uni.reLaunch({
																url: '../person/index'
															})
														}, 1000)
													} else {
														uni.hideLoading();
														uni.showToast({
															icon: 'none',
															title: t.data.msg
														})
													}
												},
												fail: (t) => {
													uni.hideLoading();
													uni.showToast({
														icon: 'none',
														title: '请求失败!'
													})
												}
											})
										} else {
											uni.showToast({
												icon: 'none',
												title: '登录失败!'
											})
										}
									},
									fail: (t) => {
										uni.hideLoading();
										uni.showToast({
											icon: 'none',
											title: '请求失败!'
										})
									}
								})
							} catch (e) {
								console.log(e)
								uni.showToast({
									icon: 'none',
									title: '服务器繁忙'
								})
								return false;
							}
						},
						fail:function(res){
							uni.showToast({
								icon: 'none',
								title: '服务器繁忙'
							})
							return false;
						}
					})
					// uni.showToast({
					// 	icon: 'success',
					// 	title: '登录成功！',
					// 	duration: 1000
					// })
					// setTimeout(function() {
					// 	uni.reLaunch({
					// 		url: '/pages/index/index'
					// 	});
					// }, 1000)
				},
				fail:function(res){
					uni.showToast({
						icon: 'none',
						title: '服务器繁忙'
					})
					return false;
				}
			});
		},
		register: function() {
			uni.navigateTo({
				url: '../register/register'
			})
		}
	}
}
</script>

<style>
	page {
		height: 100%;
	}

	.with-fun {
		display: flex;
		flex-wrap: nowrap;
	}
	.with-fun .uni-icon {
		width: 40px;
		flex-shrink: 0;
		background: #FFFFFF;
	}
	.main {
		background-color: #fde23d !important;
		width: 100%;
		height: 100%;
	}
	.otherLoginTitle {
		line-height: 40px;
	}
</style>
